<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">

<head th:replace="/common/include :: header(~{::title}, ~{::link}, ~{::style})">
    <title>DEMO-表格-编辑表格</title>
    <link th:href="@{/lib/bootstrap-table/extensions/editable/bootstrap-editable.css?v=1.5.1}" rel="stylesheet"/>
</head>
<body class="gray-bg">
<div class="container-div">
    <div class="btn-group-sm" id="toolbar" role="group">
        <a class="btn btn-success" onclick="insertRow()">
            <i class="fa fa-plus"></i> 新增行
        </a>
        <a class="btn btn-danger btn-del disabled" onclick="removeRow()">
            <i class="fa fa-remove"></i> 删除选择行
        </a>
        <a class="btn btn-danger" onclick="removeRowAll()">
            <i class="fa fa-remove"></i> 删除所有行
        </a>
        <a class="btn btn-primary" onclick="getData()">
            <i class="fa fa-search"></i> 查询所有数据
        </a>
    </div>
    <div class="col-sm-12 search-collapse" id="search-div">
        <form id="search-form">
            <input type="hidden" name="Q_status_S_EQ" value="0">
            <div class="select-list row">
                <div class="col-md-4 col-sm-4 col-xs-6">
                    <div class="control-label">
                        关键词：
                    </div>
                    <div class="col-md-8 col-sm-8 col-xs-8">
                        <input class="form-control" type="text" name="keyInfo"/>
                    </div>
                </div>
                <div class="col-md-2 col-sm-2 col-xs-12 control-label div-btn">
                    <a class="btn btn-success btn-rounded btn-sm" onclick="$.table.search('bootstrap-table', 'search-form')"><i class="fa fa-search"></i>&nbsp;搜索</a>
                    <a class="btn btn-default btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                </div>
            </div>
        </form>
    </div>
    <div class="col-xs-12 select-table table-bordered table-striped">
        <table id="bootstrap-table" data-use-row-attr-func="true" data-reorderable-rows="true"></table>
    </div>
</div>

<div th:replace="/common/include :: footer"></div>
<div th:replace="/common/include :: bootstrap-table-editable-js"></div>
<div th:replace="/common/include :: bootstrap-table-reorder-rows-js"></div>

<script th:inline="javascript">
    $(window).resize(function() {
        $('#bootstrap-table').bootstrapTable('resetView', {
            height: $.common.autoHeight($('#search-div'))
        });
    });

    $(function () {
        //var height = $.common.autoHeight($('#search-div'));
        var options = {
            code: 'ID',
            url: ctx + 'public/demo/table',
            sortName: 'ID',
            sortOrder: 'asc',
            toolbar : "toolbar",
            search: false,
            showExport: false,
            pagination: true,
            pageSize: 5,
            sidePagination: 'client',
            //height: height,
            //singleSelect: true,
            editable: true,
            onEditableSave: onEditableSave,
            //exportFn: exportFile,
            //onClickRow: onClickRow,
            //onDblClickRow: onDblClickRow,
            //onClickCell: onClickCell,
            //onDblClickCell: onDblClickCell,
            //responseHandler: responseHandler,
            //onLoadSuccess: onLoadSuccess,
            onReorderRow: onReorderRow,
            columns: [{
                    checkbox: true
                },
                {
                    field: 'ID',
                    title: 'ID',
                    sortable: true,
                    width: 75,
                    editable: {
                        type : 'text',
                        title : 'ID'
                    }
                },
                {
                    field: 'NAME',
                    title: '姓名',
                    align: 'center',
                    class: "nodrag",
                    editable: {
                        type: 'text',
                        title: '修改'
                    }
                },
                {
                    field: 'AGE',
                    title: '年龄',
                    align: 'center',
                    class: "nodrag",
                    editable: {
                        type: 'number',
                        title: '修改'
                    }
                }]
        };

        $.table.init('bootstrap-table', options);
    });

    function responseHandler(res){
        //console.log(res);
        $.modal.lay.msgSuccess('请求获取数据后处理回调函数');
    }

    function onLoadSuccess(data){
        //console.log(data);
        $.modal.lay.msgSuccess('所有数据被加载时触发函数');
    }

    function onClickRow(row, $element){
        $.modal.lay.msgSuccess('单击行ID：'+ row.ID + ' NAME：' + row.NAME);
    }

    function onDblClickRow(row, $element){
        $.modal.lay.msgSuccess('双击行ID：'+ row.ID + ' NAME：' + row.NAME);
    }

    function onClickCell(field, value, row, $element){
        $.modal.lay.msgSuccess('单击格ID：'+ row.ID + ' NAME：' + row.NAME);
    }

    function onDblClickCell(field, value, row, $element){
        $.modal.lay.msgSuccess('双击格ID：'+ row.ID + ' NAME：' + row.NAME);
    }

    function onEditableSave(field, row, rowIndex, oldValue, $el) {
        $.modal.lay.msgSuccess('字段名：' + field + '，当前值：' + row[field]  + '，旧值：' + oldValue);
    }

    /* 新增表格行 */
    function insertRow() {
        // 跳转到第一页
        $('#bootstrap-table').bootstrapTable('selectPage', 1);

        var data = {ID: '', NAME: '', AGE: 0};
        $('#bootstrap-table').bootstrapTable('append', data);
        $('#bootstrap-table tr:eq(1) td:eq(0)').trigger('dblclick');
    }

    /* 当拖拽结束后，整个表格的数据 */
    function onReorderRow(data) {
        console.log(data);
        return false;
    }

    /* 删除指定表格行 */
    function removeRow() {
        var ids = $.table.selectColumns();
        if (ids.length == 0) {
            $.modal.toast.warning('请至少选择一条记录');
            return;
        }

        $('#bootstrap-table').bootstrapTable('remove', {
            field: 'ID',
            values: ids
        });
    }

    /* 删除所有表格行 */
    function removeRowAll() {
        $('#bootstrap-table').bootstrapTable('removeAll')
    }

    /* 查询表格所有数据值 */
    function getData() {
        $.table.refresh();
        var data = $('#bootstrap-table').bootstrapTable('getData');
        $.modal.lay.openHtml({
            title: '表格数据',
            content: '<p>' + JSON.stringify(data) + '</p>'
        });
    }

    function exportFile() {
        //$.table.exportExcel(url, 'search-form');
    }

</script>
</body>
</html>
